<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-width="120px"
    size="small"
  >
    <!-- 基础字段配置 -->
    <el-form-item label="字段名称（英文）" prop="fieldName">
      <el-input v-model="formData.fieldName" placeholder="请输入英文字段名（如：userName）" />
    </el-form-item>

    <el-form-item label="显示名称（中文）" prop="displayName">
      <el-input v-model="formData.displayName" placeholder="请输入中文显示名（如：用户名）" />
    </el-form-item>

    <el-form-item label="字段类型" prop="fieldType">
      <el-select v-model="formData.fieldType" placeholder="请选择字段类型" @change="handleFieldTypeChange">
        <el-option label="字符串" value="string" />
        <el-option label="数字" value="number" />
        <el-option label="布尔值" value="boolean" />
        <el-option label="日期" value="date" />
      </el-select>
    </el-form-item>

    <el-form-item label="表单组件" prop="formComponentType">
      <el-select v-model="formData.formComponentType" placeholder="请选择表单组件">
        <el-option label="单行文本框" value="text" />
        <el-option label="数字输入框" value="number" />
        <el-option label="下拉选择框" value="select" />
        <el-option label="日期选择器" value="date" />
        <el-option label="单选框组" value="radio" />
        <el-option label="多行文本框" value="textarea" />
      </el-select>
    </el-form-item>

    <!-- 下拉选项配置（JSON字段） -->
    <el-form-item 
      label="选项配置（JSON）" 
      prop="options"
      v-if="['select', 'radio'].includes(formData.formComponentType)"
    >
      <el-input
        type="textarea"
        v-model="optionsText"
        placeholder='请输入JSON格式的选项，例如：{"options":[{"label":"选项1","value":"1"},{"label":"选项2","value":"2"}]}'
        rows="4"
      />
      <el-text type="info" size="small" style="margin-top: 8px; display: block;">
        格式说明：必须包含options数组，每个选项需有label（显示文本）和value（实际值）
      </el-text>
    </el-form-item>

    <el-form-item label="默认值" prop="defaultValue">
      <template v-if="formData.fieldType === 'number'">
        <el-input-number v-model="formData.defaultValue" :min="0" step="1" />
      </template>
      <template v-else-if="formData.fieldType === 'boolean'">
        <el-select v-model="formData.defaultValue" placeholder="请选择默认值">
          <el-option label="是" value="true" />
          <el-option label="否" value="false" />
        </el-select>
      </template>
      <template v-else-if="formData.fieldType === 'date'">
        <el-date-picker v-model="formData.defaultValue" type="date" placeholder="选择默认日期" />
      </template>
      <template v-else>
        <el-input v-model="formData.defaultValue" placeholder="请输入默认值（空则不设置）" />
      </template>
    </el-form-item>

    <!-- 禁用条件（JSON字段） -->
    <el-form-item label="禁用条件（JSON）" prop="disabledCondition">
      <el-input
        type="textarea"
        v-model="disabledConditionText"
        placeholder='请输入JSON格式的禁用条件，例如：{"field":"status","value":"1"}'
        rows="3"
      />
    </el-form-item>

    <el-form-item label="是否必填" prop="isRequired">
      <el-switch v-model="formData.isRequired" />
    </el-form-item>

    <el-form-item label="是否可查询" prop="isQueryable">
      <el-switch v-model="formData.isQueryable" />
    </el-form-item>

    <el-form-item label="是否表格显示" prop="isTableDisplay">
      <el-switch v-model="formData.isTableDisplay" />
    </el-form-item>

    <el-form-item label="排序号" prop="sortOrder">
      <el-input-number v-model="formData.sortOrder" :min="0" step="1" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// 导入API（确保请求配置正确）
import { saveField } from '../api/field'

// 定义表单引用
const formRef = ref(null)

// 接收父组件参数
const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({})
  },
  moduleId: {
    type: Number,
    required: true
  }
})

// 表单状态（所有JSON字段初始化为null）
const formData = reactive({
  id: null,
  moduleId: props.moduleId,
  fieldName: '',
  displayName: '',
  fieldType: 'string',
  formComponentType: 'text',
  options: null, // JSON字段：仅存对象或null
  isBaseField: false,
  isRequired: false,
  isQueryable: false,
  isTableDisplay: true,
  sortOrder: 0,
  systemFieldName: null,
  queryComponentType: 'text',
  defaultValue: null, // 若后端设为JSON类型，需特殊处理
  isDisabled: false,
  disabledCondition: null, // JSON字段：仅存对象或null
  queryType: 'like',
  createTime: null,
  updateTime: null
})

// JSON编辑文本框（与表单数据分离）
const optionsText = ref('')
const disabledConditionText = ref('')

// 表单规则
const rules = {
  fieldName: [
    { required: true, message: '请输入字段名称', trigger: 'blur' },
    { pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '请输入合法的英文标识符', trigger: 'blur' }
  ],
  displayName: [
    { required: true, message: '请输入显示名称', trigger: 'blur' }
  ]
}

// 初始化表单数据
onMounted(() => {
  if (props.initialData.id) {
    Object.assign(formData, props.initialData)
    
    // 初始化JSON字段（强制从字符串解析为对象）
    if (formData.options) {
      formData.options = parseJsonSafely(formData.options)
      optionsText.value = JSON.stringify(formData.options, null, 2)
    }
    
    if (formData.disabledCondition) {
      formData.disabledCondition = parseJsonSafely(formData.disabledCondition)
      disabledConditionText.value = JSON.stringify(formData.disabledCondition, null, 2)
    }

    // 处理默认值（若为JSON类型）
    if (formData.defaultValue === '') {
      formData.defaultValue = null
    }
  }
})

// 安全解析JSON（避免非法格式导致的错误）
const parseJsonSafely = (value) => {
  if (!value) return null
  if (typeof value === 'object') return value // 已为对象直接返回
  try {
    return JSON.parse(value) // 字符串转为对象
  } catch (e) {
    console.error('JSON解析失败:', e)
    ElMessage.warning('检测到无效JSON格式，已重置为空')
    return null
  }
}

// 字段类型变化联动
const handleFieldTypeChange = (type) => {
  switch (type) {
    case 'number':
      formData.formComponentType = 'number'
      break
    case 'date':
      formData.formComponentType = 'date'
      break
    case 'boolean':
      formData.formComponentType = 'radio'
      break
    default:
      formData.formComponentType = 'text'
  }
}

// 提交表单（核心修复：确保JSON字段格式+编码正确）
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    
    // 1. 处理选项配置（转为对象或null）
    formData.options = processJsonField(optionsText.value, ['select', 'radio'].includes(formData.formComponentType))
    
    // 2. 处理禁用条件（转为对象或null）
    formData.disabledCondition = processJsonField(disabledConditionText.value)
    
    // 3. 处理默认值（若后端为JSON类型，强制转为对象）
    if (formData.fieldType === 'object' && formData.defaultValue) {
      formData.defaultValue = parseJsonSafely(formData.defaultValue)
    }
    
    // 4. 最终数据清洗（所有空字符串→null，避免二进制转换）
    const submitData = cleanData({ ...formData })
    
    // 5. 提交时指定Content-Type为application/json（确保UTF-8编码）
    await saveField(submitData) // API内部需确保headers: { 'Content-Type': 'application/json;charset=utf-8' }
    
    emit('submit', submitData)
  } catch (error) {
    console.error('表单提交失败:', error)
  }
}

// 处理JSON字段：文本→对象或null
const processJsonField = (text, required = false) => {
  if (!text.trim()) {
    if (required) {
      ElMessage.error('该字段为必填JSON配置')
      throw new Error('JSON配置不能为空')
    }
    return null
  }
  return parseJsonSafely(text)
}

// 数据清洗：清除空字符串，避免二进制转换
const cleanData = (data) => {
  const cleaned = { ...data }
  Object.keys(cleaned).forEach(key => {
    // 空字符串→null
    if (cleaned[key] === '') cleaned[key] = null
    // 日期对象转为字符串（避免JSON序列化问题）
    if (cleaned[key] instanceof Date) cleaned[key] = cleaned[key].toISOString()
  })
  return cleaned
}

// 取消
const handleCancel = () => {
  emit('cancel')
}

// 向父组件传递事件
const emit = defineEmits(['submit', 'cancel'])
</script>

<style scoped>
.el-textarea__inner {
  font-family: monospace;
}
</style>
